<template>
  <view ref="container">
	<view class="DateText flex">
			<picker mode="date" @change="onDateChange" :value="LeftDateValue">
			<view class="date-picker">{{LeftDateValue}} </view>	
			</picker>  
			<view class="separator">_</view>
			<picker mode="date" @change="onDateChange2" :value="RightDateValue">
			<view class="date-picker">{{RightDateValue}}</view>	
				
			</picker>
			
	</view>                   
    <view class="collectionGoods" v-if="collectProductList.length > 0">
	
	
      <view class="item acea-row row-between-wrapper" v-for="(item, collectProductListIndex) in collectProductList" :key="collectProductListIndex" >
       <view class="pictrue">
          <image :src="item.image" />
        </view>
        <view class="text acea-row row-column-between">
          <view class="infor line1">{{item.realName}} 下单的：{{ item.storeName }}</view>
          <view class="acea-row row-between-wrapper">
            <view class="money font-color-red" >￥{{ item.totalPrice }}</view>
			<view>  <view class="infor line1">{{ item.payTime }}</view> </view>
	<!-- 		  <view class="container">
			    <button class="custom-button" @click="handleClick(item)">核销</button>
			  </view> -->
          </view>
        </view>
		
      </view>
    </view>
    

  </view>
</template>
<script>

import { getGoReturnListOrder,getGoReturnListOrdertime,orderVerific } from '@/api/order'
import Loading from '@/components/Loading'
export default {
  name: 'GoodsFoot',
  components: {
  },
  props: {},
  data: function() {
    return {
      page: 1,
      limit: 20,
      collectProductList: [],
      loadTitle: '',
      loading: false,
      loadend: false,
	  LeftDateValue: "请选择日期",
	RightDateValue: "请选择日期",
    }
  },
  mounted: function() {
    this.get_user_collect_product()
  },
  onReachBottom() {
    !this.loading && this.get_user_collect_product()
  },
  methods: {

    get_user_collect_product: function() {  
      getGoReturnListOrder().then(res => {
			this.collectProductList=res.data
      })
    },	

	getGoReturnList: function() {
		if(this.LeftDateValue==='请选择日期'){
			uni.showToast({
			  title: '请选择完整日期',
			  icon: 'none',
			  duration: 2000,
			})
			return
		}
	  let parmer={
		ordertimeleft:this.LeftDateValue,
		ordertimerigt:this.RightDateValue
	  }
	  getGoReturnListOrdertime(parmer).then(res => {
			this.collectProductList=res.data
	  })
	},	
	onDateChange: function(e) {
	        this.LeftDateValue = e.detail.value;			
			this. getGoReturnList()
	            },
				
	onDateChange2: function(e) {
			this.RightDateValue = e.detail.value;	
			this. getGoReturnList()
				 },
				 
	// handleClick: function(e){
	// 	orderVerific(e.verifyCode, 1)
	// 	.then(res => {
	// 		uni.showToast({
	// 		  title: res.msg,
	// 		  icon: 'success',
	// 		  duration: 2000,
	// 		})
	// 		this.get_user_collect_product()
	//   }).catch(error => {
 //          uni.hideLoading()
 //          uni.showToast({
 //            title: error.msg || error.response.data.msg || error.response.data.message,
 //            icon: 'none',
 //            duration: 2000,
 //          })
 //        })
	// 	},
	},
}
</script>



<style>
	/* ## 日期 ## */
	.DateText {
		flex-grow: 7;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start; /* 水平对齐方式 */
	}
 
	.date-picker {
		 margin-right: 8px; 
		color: #8f8f8f;
		  margin-right: 10px; /* 添加间距 */
		  padding: 8px 12px; /* 内边距 */
		  border: 1px solid #ccc; /* 边框 */
		  border-radius: 4px; /* 圆角 */
		  background-color: #f9f9f9; /* 背景色 */
		  font-size: 14px; /* 字体大小 */
		  color: #333; /* 文字颜色 */
		  min-width: 100px; /* 最小宽度 */
		  text-align: center; /* 文本居中 */
		  box-sizing: border-box; /* 确保 padding 和 border 不会影响元素的总宽度 */
	}
	
	.date-picker:hover {
	  border-color: #aaa; /* 较深的边框颜色 */
	  background-color: #f0f0f0; /* 稍微不同的背景色 */
	}
	
	.separator {

		color: #555; /* 可选：设置连字符颜色 */
		font-size: 14px; /* 字体大小 */
		color: #333; /* 文字颜色 */
		 min-width: 20px;
	}
.flex-button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  flex-grow: 1; /* 如果有多个按钮，它们会平均分配剩余的空间 */
  max-width: 100%; /* 防止按钮过大 */
  box-sizing: border-box;
}

</style>
